<template>
  <div class="home-page">
    <div>
      请选择关卡
    </div>
    <div class="levels">
      <level-block v-for="item in list" :key="item.id" :id="item.id" :name="item.name"></level-block>
    </div>
    <div class="editor">
      <router-link to="/editor">编辑器</router-link>
    </div>
  </div>
</template>

<script>
import { get } from '@/scripts/http'
import LevelBlock from '@/components/LevelBlock'

export default {
  name: 'Home',
  components: { LevelBlock },
  data () {
    return {
      count: 0,
      list: []
    }
  },
  async mounted () {
    let { code, data, msg } = await get('/api/count/maps')
    if (code === 1) {
      this.count = data.length
      for (let i = 1; i <= this.count; i++) {
        this.list.push({ id: i, name: `第${i}关` })
      }
    } else {
      alert(msg)
    }

  }
}
</script>

<style scoped>
.editor {
  margin-top: 100px;
}

.levels {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
</style>